/**
 * ComfyUI API 测试组件
 * 用于测试LightCC API的连接和基本功能
 */

import React, { useState } from 'react';
import { lightCCApi } from '../services/lightcc-api';
import { workflowAdapter } from '../services/workflowAdapter';

const ComfyUITest: React.FC = () => {
  const [testResult, setTestResult] = useState<string>('');
  const [isLoading, setIsLoading] = useState(false);
  const [currentTaskId, setCurrentTaskId] = useState<string | null>(null);
  const [interruptTaskId, setInterruptTaskId] = useState<string>('');
  const [customParams, setCustomParams] = useState({
    prompt: 'a beautiful landscape, high quality, detailed',
    style: 'realistic',
    width: 1024,
    height: 1024,
    steps: 20
  });

  // 测试API连接
  const testApiConnection = async () => {
    setIsLoading(true);
    setTestResult('正在测试API连接...');
    
    try {
      // 测试获取上传路径
      const uploadPath = await lightCCApi.getUploadPath('png');
      setTestResult(`✅ API连接成功！\n上传路径: ${uploadPath.url}\n文件名: ${uploadPath.fileName}`);
    } catch (error) {
      setTestResult(`❌ API连接失败: ${error instanceof Error ? error.message : '未知错误'}`);
    } finally {
      setIsLoading(false);
    }
  };

  // 测试图片上传
  const testImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    setIsLoading(true);
    setTestResult('正在测试图片上传...');

    try {
      const fileName = await lightCCApi.uploadImage(file);
      setTestResult(`✅ 图片上传成功！\n文件名: ${fileName}`);
    } catch (error) {
      setTestResult(`❌ 图片上传失败: ${error instanceof Error ? error.message : '未知错误'}`);
    } finally {
      setIsLoading(false);
    }
  };

  // 测试工作流加载
  const testWorkflowLoading = async () => {
    setIsLoading(true);
    setTestResult('正在测试工作流加载...');

    try {
      const workflow = await workflowAdapter.createAPIWorkflow({
        prompt: '测试提示词',
        imageName: 'test.png'
      });
      setTestResult(`✅ 工作流加载成功！\n工作流节点数: ${Object.keys(workflow).length}`);
    } catch (error) {
      setTestResult(`❌ 工作流加载失败: ${error instanceof Error ? error.message : '未知错误'}`);
    } finally {
      setIsLoading(false);
    }
  };

  // 转换工作流为LightCC API格式
  // const convertToLightCCFormat = (workflow: any, imageFiles: string[]) => {
  //   const prompt: any = {};
  //   
  //   // 遍历所有节点，转换为prompt格式
  //   if (workflow.nodes && Array.isArray(workflow.nodes)) {
  //     workflow.nodes.forEach((node: any) => {
  //       const nodeId = node.id.toString();
  //       const nodeType = node.class_type || node.type;
  //       
  //       // 跳过不支持的节点类型
  //       const unsupportedTypes = [
  //         'SetNode', 'QWenVL_API_S_Zho', 'Comfly_nano_banana', 
  //         'Comfly_Flux_Kontext', 'ComflyJimengVideoApi', 'AmbienceSelector',
  //         'CR Color Panel', 'DeepTranslatorTextNode', 'GeminiNode',
  //         'easy showAnything', 'easy convertAnything', 'easy imageSize',
  //         'easy imageCropFromMask', 'easy int', 'LayerUtility: TextJoin',
  //         'LayerUtility: ImageScaleByAspectRatio V2', 'LayerUtility: ImageBlendAdvance',
  //         'LayerStyle: ColorOverlay V2', 'MathExpression|pysssss', 'PrimitiveInt',
  //         'Masks Subtract', 'GrowMask', 'Mask Fill Holes',
  //         'Fast Groups Bypasser (rgthree)', 'Image Comparer (rgthree)',
  //         'Seed (rgthree)', 'ShowText|pysssss', 'Note'
  //       ];
  //       
  //       if (unsupportedTypes.includes(nodeType)) {
  //         return; // 跳过不支持的节点
  //       }
  //       
  //       prompt[nodeId] = {
  //         inputs: node.inputs || {},
  //         class_type: nodeType
  //       };
  //       
  //       // 如果有widgets_values，也需要包含
  //       if (node.widgets_values && Array.isArray(node.widgets_values)) {
  //         prompt[nodeId].widgets_values = node.widgets_values;
  //       }
  //       
  //       // 如果有_meta信息，也包含进去
  //       if (node._meta) {
  //         prompt[nodeId]._meta = node._meta;
  //       }
  //     });
  //   }
  //   
  //   return {
  //     prompt,
  //     images: imageFiles
  //   };
  // };

  // 动态修改工作流参数
  // const applyCustomParams = (workflow: any, params: any) => {
  //   const updatedWorkflow = { ...workflow };
  //   
  //   // 查找文本输入节点并更新提示词
  //   Object.keys(updatedWorkflow.nodes || {}).forEach(nodeId => {
  //     const node = updatedWorkflow.nodes[nodeId];
  //     
  //     // 更新CLIPTextEncode节点的文本
  //     if (node.class_type === 'CLIPTextEncode' || node.class_type === 'CLIPTextEncodeFlux') {
  //       if (node.inputs && node.inputs.text) {
  //         node.inputs.text = params.prompt;
  //       }
  //     }
  //     
  //     // 更新图像尺寸
  //     if (node.class_type === 'EmptyImage') {
  //       if (node.inputs) {
  //         node.inputs.width = params.width;
  //         node.inputs.height = params.height;
  //       }
  //     }
  //     
  //     // 更新采样步数
  //     if (node.class_type === 'KSampler' || node.class_type === 'SamplerCustomAdvanced') {
  //       if (node.inputs) {
  //         node.inputs.steps = params.steps;
  //       }
  //     }
  //     
  //     // 更新其他可能的参数
  //     if (node.widgets_values && Array.isArray(node.widgets_values)) {
  //       // 根据节点类型更新widgets_values
  //       if (node.class_type === 'easy showAnything' && node.widgets_values[0] !== undefined) {
  //         node.widgets_values[0] = params.prompt;
  //       }
  //     }
  //   });
  //   
  //   return updatedWorkflow;
  // };

  // 测试完整的ComfyUI任务流程 - 直接使用LightCC API
  const testComfyUITask = async () => {
    setIsLoading(true);
    setTestResult('🚀 开始测试LightCC ComfyUI任务流程...\n\n步骤1: 上传测试图片...');

    try {
      // 1. 先上传一张测试图片
      setTestResult(prev => prev + `\n步骤1.1: 创建测试图片...`);
      
      // 创建一个简单的测试图片（1x1像素的PNG）
      const canvas = document.createElement('canvas');
      canvas.width = 512;
      canvas.height = 512;
      const ctx = canvas.getContext('2d');
      if (ctx) {
        // 创建一个渐变背景
        const gradient = ctx.createLinearGradient(0, 0, 512, 512);
        gradient.addColorStop(0, '#ff6b6b');
        gradient.addColorStop(0.5, '#4ecdc4');
        gradient.addColorStop(1, '#45b7d1');
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, 512, 512);
        
        // 添加文字
        ctx.fillStyle = 'white';
        ctx.font = '24px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('Test Image', 256, 256);
      }
      
      // 将canvas转换为File对象
      const blob = await new Promise<Blob>((resolve) => {
        canvas.toBlob((blob) => {
          resolve(blob!);
        }, 'image/png');
      });
      
      // 创建File对象
      const file = new File([blob], 'test-image.png', { type: 'image/png' });
      
      setTestResult(prev => prev + `\n✅ 测试图片创建成功\n\n步骤1.2: 上传图片到LightCC...`);
      
      // 上传图片
      const fileName = await lightCCApi.uploadImage(file);
      setTestResult(prev => prev + `\n✅ 图片上传成功\n文件名: ${fileName}\n\n步骤2: 加载ComfyUI工作流...`);
      
      // 2. 使用请求参考数据（确保格式正确，使用LightCC支持的模型）
      setTestResult(prev => prev + `\n步骤2: 加载请求参考数据...`);
      
      const testDataResponse = await fetch('/yunjian_worklFlow/瑜伽生图（风格参考）API.json');
      if (!testDataResponse.ok) {
        throw new Error(`请求参考数据加载失败: ${testDataResponse.status}`);
      }
      const testData = await testDataResponse.json();
      
      // 使用完整的prompt，不跳过任何节点
      const updatedTestData = {
        prompt: testData, // 使用完整的prompt，包含所有节点
        images: [fileName] // 使用实际上传的图片文件名
      };
      
      // 更新prompt中的图片文件名
      Object.keys(updatedTestData.prompt).forEach(nodeId => {
        const node = updatedTestData.prompt[nodeId];
        if (node.class_type === 'LoadImage' && node.inputs && node.inputs.image) {
          node.inputs.image = fileName;
        }
      });
      
      setTestResult(prev => prev + `\n✅ 高清放大API数据加载成功\nprompt节点数: ${Object.keys(updatedTestData.prompt).length}\n图片文件: ${updatedTestData.images.join(', ')}\n\n步骤3: 创建LightCC任务...`);
      
      // 3. 创建任务 - 使用高清放大API数据
      const comfyApiKey = "comfyui-fa2ecfe15ffe89b2a8c5b8e9216a48cc7b5dae9ce1e095a004f4465a96a5827f";
      const taskResult = await lightCCApi.createTask(updatedTestData.prompt, updatedTestData.images.map(img => img.fileName), comfyApiKey);
      setCurrentTaskId(taskResult.taskId); // 保存任务ID
      setTestResult(prev => prev + `\n✅ 任务创建成功！\n任务ID: ${taskResult.taskId}\n状态: ${taskResult.status === 0 ? '排队中' : '其他'}\n\n步骤4: 开始监控任务进度...`);
      
      // 4. 轮询任务进度
      const statusMap = {
        0: '排队中',
        1: '运行中', 
        2: '已中断',
        3: '异常',
        4: '完成'
      };
      
      const finalResult = await lightCCApi.pollTaskProgress(
        taskResult.taskId,
        (progress) => {
          const statusText = statusMap[progress.status as keyof typeof statusMap] || '未知';
          setTestResult(prev => {
            const lines = prev.split('\n');
            const lastLine = lines[lines.length - 1];
            if (lastLine.includes('进度:')) {
              lines[lines.length - 1] = `进度: ${statusText} (${progress.process}%) - ${progress.msg}`;
            } else {
              lines.push(`进度: ${statusText} (${progress.process}%) - ${progress.msg}`);
            }
            return lines.join('\n');
          });
        }
      );
      
      // 5. 显示最终结果
      const statusText = statusMap[finalResult.status as keyof typeof statusMap] || '未知';
      setTestResult(prev => prev + `\n\n🎉 任务执行完成！\n状态: ${statusText} (${finalResult.status})\n消耗算力: ${finalResult.costPoint}点\n结果图片数量: ${finalResult.result?.length || 0}`);
      
      if (finalResult.result && finalResult.result.length > 0) {
        setTestResult(prev => prev + `\n\n📸 生成的结果图片:\n${finalResult.result.map((url, index) => `${index + 1}. ${url}`).join('\n')}`);
      }
      
      if (finalResult.error) {
        setTestResult(prev => prev + `\n\n⚠️ 执行错误: ${finalResult.error}`);
      }
      
      setTestResult(prev => prev + `\n\n💡 说明: 此测试直接使用LightCC API执行ComfyUI工作流，无需本地ComfyUI运行！`);
      
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : '未知错误';
      setTestResult(prev => prev + `\n\n❌ 任务失败: ${errorMessage}\n\n💡 解决方案:\n1. 检查账户余额是否充足\n2. 确认API密钥是否正确\n3. 检查工作流JSON格式是否正确\n4. 确认工作流中使用的节点在LightCC环境中可用\n5. 查看浏览器控制台获取详细错误信息`);
    } finally {
      setIsLoading(false);
    }
  };

  // 查看任务结果
  const checkTaskResult = async () => {
    if (!currentTaskId) {
      setTestResult(prev => prev + `\n❌ 没有可查看的任务ID`);
      return;
    }
    
    setIsLoading(true);
    setTestResult(prev => prev + `\n\n🔍 正在查看任务结果...\n任务ID: ${currentTaskId}`);
    
    try {
      const result = await lightCCApi.getTaskResult(currentTaskId);
      
      const statusMap = {
        0: '排队中',
        1: '运行中', 
        2: '已中断',
        3: '异常',
        4: '完成'
      };
      
      const statusText = statusMap[result.status as keyof typeof statusMap] || '未知';
      
      setTestResult(prev => prev + `\n\n✅ 任务结果获取成功！\n任务ID: ${result.taskId}\n状态: ${statusText} (${result.status})\n消耗算力点: ${result.costPoint}\n开始时间: ${new Date(result.startTime).toLocaleString()}\n结束时间: ${result.endTime ? new Date(result.endTime).toLocaleString() : 'N/A'}`);
      
      if (result.result && result.result.length > 0) {
        setTestResult(prev => prev + `\n\n🖼️ 结果图片 (${result.result.length}张):`);
        result.result.forEach((imageUrl, index) => {
          setTestResult(prev => prev + `\n${index + 1}. ${imageUrl}`);
        });
      } else {
        setTestResult(prev => prev + `\n\n📷 暂无结果图片`);
      }
      
      if (result.error) {
        setTestResult(prev => prev + `\n\n⚠️ 错误信息: ${result.error}`);
      }
      
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : '未知错误';
      setTestResult(prev => prev + `\n\n❌ 获取任务结果失败: ${errorMessage}`);
    } finally {
      setIsLoading(false);
    }
  };

  // 中断任务
  const interruptTask = async () => {
    if (!interruptTaskId.trim()) {
      setTestResult(prev => prev + `\n❌ 请输入要中断的任务ID`);
      return;
    }
    
    setIsLoading(true);
    setTestResult(prev => prev + `\n\n🛑 正在中断任务...\n任务ID: ${interruptTaskId}`);
    
    try {
      const result = await lightCCApi.interruptTask(interruptTaskId);
      
      const statusMap = {
        0: '排队中',
        1: '运行中', 
        2: '已中断',
        3: '异常',
        4: '完成'
      };
      
      const statusText = statusMap[result.status as keyof typeof statusMap] || '未知';
      
      setTestResult(prev => prev + `\n\n✅ 任务中断成功！\n任务ID: ${result.taskId}\n状态: ${statusText} (${result.status})\n消耗算力点: ${result.costPoint}`);
      
      if (result.error) {
        setTestResult(prev => prev + `\n\n⚠️ 错误信息: ${result.error}`);
      }
      
      // 清空输入框
      setInterruptTaskId('');
      
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : '未知错误';
      setTestResult(prev => prev + `\n\n❌ 中断任务失败: ${errorMessage}\n\n💡 注意: 只能中断排队中和运行中的任务`);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div style={{ 
      padding: '20px', 
      width: '100vw',
      height: '100vh',
      margin: '0',
      backgroundColor: '#1c1d21',
      color: '#ffffff',
      boxSizing: 'border-box',
      overflow: 'auto'
    }}>
      <h2 style={{ color: '#ffffff' }}>ComfyUI API 测试</h2>
      
      <div style={{ marginBottom: '20px', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
        <button 
          onClick={testApiConnection}
          disabled={isLoading}
          style={{
            padding: '10px 20px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: isLoading ? 'not-allowed' : 'pointer'
          }}
        >
          {isLoading ? '测试中...' : '测试API连接'}
        </button>
        
        <button 
          onClick={testWorkflowLoading}
          disabled={isLoading}
          style={{
            padding: '10px 20px',
            backgroundColor: '#28a745',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: isLoading ? 'not-allowed' : 'pointer'
          }}
        >
          {isLoading ? '测试中...' : '测试工作流加载'}
        </button>

        <button 
          onClick={testComfyUITask}
          disabled={isLoading}
          style={{
            padding: '10px 20px',
            backgroundColor: '#ff6b35',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: isLoading ? 'not-allowed' : 'pointer',
            fontWeight: 'bold',
            marginRight: '10px'
          }}
        >
          {isLoading ? '测试中...' : '🚀 测试完整ComfyUI任务'}
        </button>
        
        {currentTaskId && (
          <button 
            onClick={checkTaskResult}
            disabled={isLoading}
            style={{
              padding: '10px 20px',
              backgroundColor: '#28a745',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: isLoading ? 'not-allowed' : 'pointer',
              fontWeight: 'bold'
            }}
          >
            {isLoading ? '查询中...' : '🔍 查看任务结果'}
          </button>
        )}
      </div>

      <div style={{ marginBottom: '20px' }}>
        <h3 style={{ color: '#ffffff', marginBottom: '15px' }}>任务管理</h3>
        <div style={{ display: 'flex', gap: '10px', alignItems: 'center', flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
            <label style={{ color: '#ffffff', whiteSpace: 'nowrap' }}>
              中断任务ID:
            </label>
            <input
              type="text"
              value={interruptTaskId}
              onChange={(e) => setInterruptTaskId(e.target.value)}
              disabled={isLoading}
              placeholder="输入要中断的任务ID"
              style={{
                padding: '8px 12px',
                border: '1px solid #ddd',
                borderRadius: '4px',
                minWidth: '200px',
                backgroundColor: '#2a2a2a',
                color: '#ffffff'
              }}
            />
            <button 
              onClick={interruptTask}
              disabled={isLoading || !interruptTaskId.trim()}
              style={{
                padding: '8px 16px',
                backgroundColor: '#dc3545',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: (isLoading || !interruptTaskId.trim()) ? 'not-allowed' : 'pointer',
                fontWeight: 'bold',
                opacity: (isLoading || !interruptTaskId.trim()) ? 0.6 : 1
              }}
            >
              {isLoading ? '中断中...' : '🛑 中断任务'}
            </button>
          </div>
          {currentTaskId && (
            <button 
              onClick={() => setInterruptTaskId(currentTaskId)}
              disabled={isLoading}
              style={{
                padding: '8px 12px',
                backgroundColor: '#6c757d',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: isLoading ? 'not-allowed' : 'pointer',
                fontSize: '12px'
              }}
            >
              使用当前任务ID
            </button>
          )}
        </div>
        <p style={{ fontSize: '12px', color: '#cccccc', marginTop: '5px' }}>
          💡 只能中断排队中(状态0)和运行中(状态1)的任务
        </p>
      </div>

      <div style={{ marginBottom: '20px' }}>
        <h3 style={{ color: '#ffffff', marginBottom: '15px' }}>自定义参数设置</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '15px', marginBottom: '15px' }}>
          <div>
            <label style={{ display: 'block', marginBottom: '5px', color: '#ffffff' }}>
              提示词 (Prompt):
            </label>
            <input
              type="text"
              value={customParams.prompt}
              onChange={(e) => setCustomParams(prev => ({ ...prev, prompt: e.target.value }))}
              disabled={isLoading}
              style={{
                padding: '8px',
                border: '1px solid #ddd',
                borderRadius: '4px',
                width: '100%',
                backgroundColor: '#2a2a2a',
                color: '#ffffff'
              }}
            />
          </div>
          <div>
            <label style={{ display: 'block', marginBottom: '5px', color: '#ffffff' }}>
              风格 (Style):
            </label>
            <select
              value={customParams.style}
              onChange={(e) => setCustomParams(prev => ({ ...prev, style: e.target.value }))}
              disabled={isLoading}
              style={{
                padding: '8px',
                border: '1px solid #ddd',
                borderRadius: '4px',
                width: '100%',
                backgroundColor: '#2a2a2a',
                color: '#ffffff'
              }}
            >
              <option value="realistic">写实</option>
              <option value="anime">动漫</option>
              <option value="artistic">艺术</option>
              <option value="fantasy">奇幻</option>
            </select>
          </div>
          <div>
            <label style={{ display: 'block', marginBottom: '5px', color: '#ffffff' }}>
              宽度 (Width):
            </label>
            <input
              type="number"
              value={customParams.width}
              onChange={(e) => setCustomParams(prev => ({ ...prev, width: parseInt(e.target.value) }))}
              disabled={isLoading}
              style={{
                padding: '8px',
                border: '1px solid #ddd',
                borderRadius: '4px',
                width: '100%',
                backgroundColor: '#2a2a2a',
                color: '#ffffff'
              }}
            />
          </div>
          <div>
            <label style={{ display: 'block', marginBottom: '5px', color: '#ffffff' }}>
              高度 (Height):
            </label>
            <input
              type="number"
              value={customParams.height}
              onChange={(e) => setCustomParams(prev => ({ ...prev, height: parseInt(e.target.value) }))}
              disabled={isLoading}
              style={{
                padding: '8px',
                border: '1px solid #ddd',
                borderRadius: '4px',
                width: '100%',
                backgroundColor: '#2a2a2a',
                color: '#ffffff'
              }}
            />
          </div>
          <div>
            <label style={{ display: 'block', marginBottom: '5px', color: '#ffffff' }}>
              采样步数 (Steps):
            </label>
            <input
              type="number"
              value={customParams.steps}
              onChange={(e) => setCustomParams(prev => ({ ...prev, steps: parseInt(e.target.value) }))}
              disabled={isLoading}
              min="1"
              max="50"
              style={{
                padding: '8px',
                border: '1px solid #ddd',
                borderRadius: '4px',
                width: '100%',
                backgroundColor: '#2a2a2a',
                color: '#ffffff'
              }}
            />
          </div>
        </div>
      </div>

      <div style={{ marginBottom: '20px' }}>
        <label style={{ display: 'block', marginBottom: '10px', color: '#ffffff' }}>
          测试图片上传 (可选):
        </label>
        <input
          type="file"
          accept="image/*"
          onChange={testImageUpload}
          disabled={isLoading}
          style={{
            padding: '8px',
            border: '1px solid #ddd',
            borderRadius: '4px',
            width: '100%'
          }}
        />
        <p style={{ fontSize: '12px', color: '#cccccc', marginTop: '5px' }}>
          如果不选择图片，系统会自动生成测试图片
        </p>
      </div>

      <div style={{
        padding: '15px',
        backgroundColor: '#2ef2cc',
        border: '1px solid #dee2e6',
        borderRadius: '4px',
        whiteSpace: 'pre-wrap',
        fontFamily: 'monospace',
        fontSize: '14px',
        color: '#333'
      }}>
        {testResult || '点击"测试API连接"开始测试...'}
      </div>

      <div style={{ marginTop: '20px', fontSize: '12px', color: '#cccccc' }}>
        <p><strong style={{ color: '#ffffff' }}>API配置信息:</strong></p>
        <p>Base URL: /api/lightcc (通过Vite代理)</p>
        <p>实际目标: https://api.lightcc.cloud/system/api/v1</p>
        <p>API Key: 6948fec62ff649848bc0be21a49275f6</p>
        <p style={{ color: '#28a745' }}>✅ 已配置CORS代理解决跨域问题</p>
        
        <p style={{ marginTop: '15px' }}><strong style={{ color: '#ffffff' }}>API路径映射:</strong></p>
        <p>前端请求: /api/lightcc/task/create</p>
        <p>代理转发: https://api.lightcc.cloud/system/api/v1/task/create</p>
        
        <p style={{ marginTop: '15px' }}><strong style={{ color: '#ffffff' }}>下一步测试:</strong></p>
        <p>1. 点击"测试工作流加载" - 验证工作流JSON解析</p>
        <p>2. 点击"🚀 测试完整ComfyUI任务" - 使用高清放大（gemini）API数据</p>
        <p>3. 上传图片测试 - 验证图片上传功能</p>
        <p>4. 使用任务管理 - 中断正在运行的任务</p>
        <p style={{ color: '#28a745' }}>✅ 使用: testJson/高清放大（gemini）API.json (包含所有节点，已配置API key)</p>
        <p style={{ color: '#28a745' }}>✅ 无需本地ComfyUI运行，直接使用LightCC云端服务！</p>
        <p style={{ color: '#28a745' }}>✅ 已添加ComfyUI API密钥支持: comfyui-fa2ecfe15ffe89b2a8c5b8e9216a48cc7b5dae9ce1e095a004f4465a96a5827f</p>
        <p style={{ color: '#28a745' }}>✅ 支持任务中断功能: PUT /system/api/v1/task/interrupt/&#123;taskId&#125;</p>
        <p style={{ color: '#ff6b35' }}>💡 如果遇到"余额不足"错误，请先充值LightCC账户</p>
        <p style={{ color: '#ff6b35' }}>⚠️ 注意: 只能中断排队中(状态0)和运行中(状态1)的任务</p>
      </div>
    </div>
  );
};

export default ComfyUITest;
